<template>
  <view class="page">
    <view class="bg">
      <image class="bg-img" src="@/static/img/login-bg.png" mode="" />
      <view class="bg-body flex-a">
        <image class="bg-logo" src="@/static/img/logo.png" />
        <view class="flex-1">
          <view class="text-30 leading-30 mb-5">Hello！</view>
          <view class="text-22">欢迎登陆后台</view>
        </view>
      </view>
    </view>
    <view class="bg-white p-20">
      <uv-form
        ref="formRef"
        label-width="0"
        :model="form"
        :rules="rules"
      >
        <view class="form-controller">
          <uv-form-item
            label=""
            prop="form.phone"
          >
            <uv-input
              v-model="form.phone"
              border="none"
              maxlength="11"
              font-size="16"
              placeholder="请输入手机号码"
            />
          </uv-form-item>
        </view>
        <!-- <view class="form-controller mt-20">
          <uv-form-item
            label=""
            prop="form.code"
          >
            <uv-input
              v-model="form.code"
              border="none"
              maxlength="6"
              font-size="16"
              placeholder="请输入验证码"
            />
            <template #right>
              <view class="hair-l w-100 text-15 text-center">
                <view v-show="seconds" class="text-primary">{{ seconds > 9 ? seconds : `0${seconds}` }}秒后重发</view>
                <text v-show="seconds === 0" :class="form.phone.length === 11 ? 'text-primary' : 'text-tips'" @click="getCode">获取验证码</text>
              </view>
            </template>
          </uv-form-item>
        </view> -->
      </uv-form>
      <view class="py-40 ">
        <uv-button size="large" type="primary" :disabled="disabled" @click="save">
          <view class="text-16">登 录</view>
        </uv-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const disabled = computed(() => {
  return !$.utils.isMobile(form.phone) || form.code.length < 4
})

const seconds = ref(0)

let timer = null

const { form } = $.useForm({
  // 验证码
  code: '000000',
  // 对应手机号
  phone: '',
  // 发送登录短信接口返回
  login_code: ''
})

const rules = {
  code: {
    type: 'number',
    required: true,
    min: 4,
    max: 6,
    message: '请填写验证码',
    trigger: ['blur', 'change']
  },
  phone: {
    type: 'number',
    len: 11,
    required: true,
    message: '请填写手机号码',
    trigger: ['blur', 'change']
  }
}

onLoad((options = {}) => {

})

function save() {
  // if (!form.login_code) {
  //   return $.utils.toast('请先获取验证码')
  // }
  if (!disabled.value) {
    $.utils.post('/index/loginSms', form).then(res => {
      if (res.code === 0) {
        $.store('user').setToken(res.data.token)
        const opts = $.router.hasHistory() ? { tab: 3 } : { tab: 4, url: '/pages/index/index' }
        $.utils.tips({ title: res.msg || '登录成功' }, opts)
      } else {
        $.utils.toast(res.msg || '登录失败')
      }
    })
  }
}
function setTimer() {
  seconds.value = 60
  timer = setInterval(() => {
    seconds.value -= 1
    if (seconds.value === 0 && timer)
      clearInterval(timer)
  }, 1000)
}
function getCode() {
  if (!$.utils.isMobile(form.phone)) {
    return $.utils.toast('请输入有效的手机号')
  }
  // const res = {
  //   'msg': '操作成功',
  //   'data': {
  //     'login_code': 'b940dac3da2eb7d8722b3efeac443ad1'
  //   },
  //   'success': true,
  //   'code': 0
  // }
  // if (res.code === 0) {
  //   setTimer()
  //   form.login_code = res.data.login_code
  //   $.utils.toast(res.msg || '发送成功')
  // } else {
  //   $.utils.toast(res.msg || '发送失败')
  // }
  // return
  $.utils.post('/index/sendSms', {
    phone: form.phone
  }).then(res => {
    if (res.code === 0) {
      setTimer()
      form.login_code = res.data.login_code
      $.utils.toast(res.msg || '发送成功')
    } else {
      $.utils.toast(res.msg || '发送失败')
    }
  })
}
</script>

<style lang="scss">
	.page {
		position: relative;
		height: 100vh;
		background-color: #fff;
	}

	.bg {
		position: relative;
		padding-top: var(--status-bar-height);
		background-image: linear-gradient(to bottom, #2a6eff 0, #2c7cf9 100%);
	}

	.bg-body {
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		color: #fff;
		word-break: keep-all;
	}

	.bg-img {
		display: block;
		width: 100%;
		height: 500rpx;
		background-color: transparent;
	}

	.bg-logo {
		display: block;
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.form-controller {
		border: 1rpx solid #ddd;
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
	}
</style>
